<template>
  <view class="scrollbox">
	  <view >
		  <view class="title">
			    <slot>学习资料</slot>
		  </view>
		
	  	<scroll-view
	  	  class="scroll-view_H"
	  	  scroll-x="true"
	  	  enable-flex
	  	  :show-scrollbar="false"
	  	>
	  	  <view class="itembox" v-for="(item,index) in arr":key='index'>
	  		  <view class='clum'>
	  			  <view class="flexbox">
	  			  			  <view class="itemimg">
	  			  			    <image src="../static/img/mao.jpg" alt="" mode class="image"/>
	  			  			  </view>
	  			  			  <view class="itemtext" >
	  			  			  			<view class="itemtexthead">我爱学习</view>
	  			  			  			<view class="itemtextfoot">
	  			  			  				<u-button type="success"  shape="circle" size='mini'>免费</u-button>
	  			  			  			<!-- 	<view>免费</view> -->
	  			  			  				<u-button  shape="circle" >马上学习</u-button>
	  			  			  			</view>
	  			  			         
	  			  			  </view>
	  			  </view>
	  			  <view class="flexbox">
	  			  			  <view class="itemimg">
	  			  			    <image src="../static/img/mao.jpg" alt="" mode class="image"/>
	  			  			  </view>
	  			  			  <view class="itemtext" >
	  			  			  			<view class="itemtexthead">我爱学习</view>
	  			  			  			<view class="itemtextfoot">
	  			  			  				<u-button type="success"  shape="circle" size='mini'>免费</u-button>
	  			  			  			<!-- 	<view>免费</view> -->
	  			  			  				<u-button  shape="circle">马上学习</u-button>
	  			  			  			</view>
	  			  			         
	  			  			  </view>
	  			  </view>
	  		  </view>
	  	
	  	  
	  	  </view>
	  	  
	  	</scroll-view>
	  </view>

  </view>
</template>

<script setup>
const scrollTop = ref(0);
const arr = [
  {
    title: 'vue',
    url: "../static/img/mao.jpg",
  },
  {
    a: 456,
    url: "../static/img/mao.jpg",
  },
  {
    a: 789,
    url: "../static/img/mao.jpg",
  },
  {
    a: 789,
    url: "../static/img/mao.jpg",
  },
];
</script>
<style secoped lang="scss">
.scrollbox {
	padding: 10px;
	height: 100%;
  width: 100%;
  border-radius: 20rpx;
 background: linear-gradient(to bottom, #ff7e5f, #feb47b);
 margin:20rpx 0;
 .title{
	 font-weight: bold;
	 font-size: 20px;
	   background: linear-gradient(45deg, #ff7e5f, #feb47b); /* 渐变色 */
	   color: white; 
	
 }
}
.scroll-view_H {

  white-space: nowrap;
  width: 100%;
  height: 500rpx;
  
}
// .scroll-view-item {
//   height: 300rpx;
//   line-height: 300rpx;
//   text-align: center;
//   font-size: 36rpx;
// }
// .scroll-view-item_H {
//   display: inline-block;
//   width: 100%;
//   height: 600rpx;
//   line-height: 600rpx;
//   text-align: center;
//   font-size: 36rpx;
// }
.itembox {
  width: 100%;
  height: 500rpx;
  

 display: inline-block;
 .clum{
	 
	 width: 100%;
	 height: 100%;
	 display: flex;
	 flex-direction: column;
justify-content: space-around;
 .flexbox{
	 width: 100%;
	  height: 230rpx;
	
	 display: flex;

	 .itemimg {
	   height: 100%;
	   width: 40%;
	   .image {
	     height: 100%;
	 
	     width: 100%;
	 	
	   }
	 }
	 	.itemtext{
	 	margin: 10rpx 10rpx 0 10rpx;
		
	 		flex:1;
	 		display: flex;
			
	 		flex-direction: column;
	 		.itemtexthead{
	 			flex: 1;
	 			display: flex;
	 			justify-content: flex-start;
	 
	 
	 		}
	 		.itemtextfoot{
	 			height: 100rpx;
	 			line-height: 100rpx;
	 			display: flex;
				
	 			justify-content: space-between;
				align-items: center;
	 
	 
	 		}
	 
	 
	 
	 	}
	 
 }
 }

	
 
}
</style>
